<template>
  <div>
    <el-dialog
      title="挂需求"
      v-model="editVisible"
      width="600px"
      top="5vh"
      :close-on-click-modal="false"
      @close="handleclose"
    >
      <el-form>
        <el-form-item :required="true">
          <div>
            <div>平台银行账户</div>
            <div>公司名：三明****有限公司</div>
            <div>收款账号：1302 3333 5566 1002 258</div>
            <div>开户行：三明建设梅列支行</div>
            <div class="displayflex">
              <span class="width160">*上传支付凭证（截图）：</span>
              <el-upload
                :action="uploaddata.url+''"
                :data="uploaddata.data"
                :on-preview="handlePictureCardPreview"
                :headers="uploaddata.headers"
                name="file"
                accept=".png,.jpg,.gif"
                list-type="picture-card"
                @click="handleUpload"
                :on-remove="handleRemove"
                :on-success="Uploadsuccess"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </div>
            <div class="btn_b">
              <el-button @click="handleclose" class="icon-search1"
                >取消</el-button
              >
              <el-button
                type="primary"
                class="icon-search"
                @click="handleSaveEdit"
                >确定</el-button
              >
            </div>
          </div>
        </el-form-item>
      </el-form>
      <template #footer> </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../api/api";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    // 参考图片
    const editVisible = ref(context.attrs.editVisible);
    const radioValue = ref(context.attrs.radioValue);
    const router = useRouter();
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    //图片上传
    const uploaddata = ref({});
    const handleUpload = () => {
      uploaddata.value = {
        url: api.getUrl() + "external/file/upload", //接口名称
        data: {
          upType: "fc",
          sort: Math.floor(Math.random() * 20) + 1,
        },
        headers: {
          token: localStorage.getItem("token"),
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      };
    };
    const handleSaveEdit = () => {
      context.emit("handleSaveEdit");
    };
    return {
      router,
      radioValue,
      editVisible,
      uploaddata,
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      handleclose,
      handleSaveEdit,
      handleUpload,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../assets/css/common.css";@import "../assets/css/common.less";
.btn_b {
  margin-top: 30px;
}
</style>
